import React, { useState } from "react";
import { history, connect } from 'umi'
import { Space, Form, Popover, Button } from 'antd'
import FormCondition from '@/components/FormCondition';
import SettingOpeational from '@/components/SettingOpeational'
const Operational = (props) => {
  const { detail = {} } = props
  const [form] = Form.useForm();
  const [data, setData] = useState({
    operation: '0'
  })
  const { operation } = data
  const formItems = [
    {
      label: '信息采集',
      name: 'showGoodsTagFlag',

      type: 'radio',
      onChange: (e) => {
        setData({
          ...data,
          operation: e.target.value
        })
      },
      select: {
        1: '开启',
        0: '关闭',
      }
    },
    {
      type: 'noForm',
      visible: operation === '1',
      formItem: (
        <SettingOpeational></SettingOpeational>
      ),
    },
    {
      label: '采集页面',
      name: 'showGoodsTagFlag',
      type: 'radio',
      visible: operation === '1',
      onChange: (e) => {
        setData({
          ...data,
          operation: e.target.value
        })
      },
      select: {
        1: <div>确认购买页 <Popover content={<img></img>}>
          <Button type='link'> 查看示例</Button></Popover></div>,
      }
    },
  ]
  return (
    <Space direction={'vertical'} style={{ width: '100%' }}>
      <div className='commodity-manage-part'>
        <div className='commodity-part-title'>
          <div className='commodity-title-line'></div>
          <div className='commodity-part-title-word'>信息采集</div>
        </div>
      </div>
      <FormCondition form={form} formItems={formItems} initialValues={{ ...detail, showGoodsTagFlag: operation }}></FormCondition>
    </Space>
  );
};

export default connect(({ commodity, loading }) => ({
  loading: loading.effects['commodity/fakeDeleteOfflineGoods']
}))(Operational);
;
